<template>
  <div class="travel-view">
    <header class="header">
      <img src="/LOGO.png" alt="School Logo" class="logo" />
      <h5 class="school-name">中国计量大学 Web前端开发</h5>
    </header>
    <main class="content">
      <h1 class="main-title">嘉兴特色文化</h1>
      <section class="card-section">
        <!-- 金庸 -->
        <router-link to="/famous/jinyong" class="culture-card" @mouseover="hoveredCard = 1" @mouseleave="hoveredCard = 0">
          <img src="jin_yong.jpeg" alt="金庸" class="card-image left"/>
          <div class="card-text">
            <h1 v-if="hoveredCard !== 1">金庸</h1>
            <h3 v-else>金庸</h3>
            <p v-if="hoveredCard !== 1">金庸，本名查良镛，嘉兴人，是中国武侠小说的泰斗。他的作品影响了几代人，是中文世界最具影响力的作家之一。</p>
            <p v-else>金庸，本名查良镛，嘉兴人，是中国武侠小说的泰斗。他的作品影响了几代人，是中文世界最具影响力的作家之一。</p>
          </div>
        </router-link>

        <!-- 徐志摩 -->
        <router-link to="/famous/xuzhimo" class="culture-card" @mouseover="hoveredCard = 2" @mouseleave="hoveredCard = 0">
          <div class="card-text">
            <h1 v-if="hoveredCard !== 2">徐志摩</h1>
            <h3 v-else>徐志摩</h3>
            <p v-if="hoveredCard !== 2">徐志摩是中国现代诗人、散文家，嘉兴人。他的作品以浪漫主义情感为主，是中国现代诗歌的重要人物。</p>
            <p v-else>徐志摩是中国现代诗人、散文家，嘉兴人。他的作品以浪漫主义情感为主，是中国现代诗歌的重要人物。</p>
          </div>
          <img src="xu_zhi_mo.jpg" alt="徐志摩" class="card-image right"/>
        </router-link>

        <!-- 王国维 -->
        <router-link to="/famous/wangguowei" class="culture-card" @mouseover="hoveredCard = 3" @mouseleave="hoveredCard = 0">
          <img src="wang_guo_wei.jpg" alt="王国维" class="card-image left"/>
          <div class="card-text">
            <h1 v-if="hoveredCard !== 3">王国维</h1>
            <h3 v-else>王国维</h3>
            <p v-if="hoveredCard !== 3">王国维，嘉兴人，中国现代著名学者、文学家，尤其以其对古代文学的研究贡献巨大。</p>
            <p v-else>王国维，嘉兴人，中国现代著名学者、文学家，尤其以其对古代文学的研究贡献巨大。</p>
          </div>
        </router-link>

        <!-- 丰子恺 -->
        <router-link to="/famous/fengzikai" class="culture-card" @mouseover="hoveredCard = 4" @mouseleave="hoveredCard = 0">
          <div class="card-text">
            <h1 v-if="hoveredCard !== 4">丰子恺</h1>
            <h3 v-else>丰子恺</h3>
            <p v-if="hoveredCard !== 4">丰子恺，嘉兴人，是中国现代著名画家、散文家和音乐家，他的画作具有很高的艺术价值。</p>
            <p v-else>丰子恺，嘉兴人，是中国现代著名画家、散文家和音乐家，他的画作具有很高的艺术价值。</p>
          </div>
          <img src="feng_zi_kai.jpg" alt="丰子恺" class="card-image right"/>
        </router-link>
      </section>
      <router-link to="/HomePage" class="back-button">返回</router-link>
    </main>
    <footer class="footer">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 15024340028, 邮箱: 2351922591@qq.com</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'CultureView',
  data() {
    return {
      hoveredCard: 0, // 当前悬停的卡片编号
    };
  },
};
</script>

<style scoped>
.travel-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f8f8f8;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 0.5em;
}

.school-name {
  margin: 0;
  color: #333;
}

.content {
  flex: 1;
  padding-top: 6em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-title {
  font-size: 3em;
  color: #333;
  margin: 0.5em 0.5em;
  text-align: center;
}

.card-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.culture-card {
  display: flex;
  align-items: center;
  padding: 1em;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  text-decoration: none;
}

.card-image {
  width: 400px;
  height: 600px;
  border-radius: 10px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.culture-card:hover .card-image {
  width: 1000px;
  height: 600px;
}

.card-image.left {
  margin-right: 1em;
}

.card-image.right {
  margin-left: 1em;
  margin-right: 0;
}

.card-text {
  flex: 1;
  text-align: center;
}

.card-text h1 {
  font-size: 2.5em;
  color: #333;
  margin: 0.5em 0;
  transition: font-size 0.3s ease;
}

.card-text h3 {
  font-size: 1.5em;
  color: #333;
  margin: 0.5em 0;
  transition: font-size 0.3s ease;
}

.card-text p {
  font-size: 1.1em;
  color: #666;
}

.back-button {
  margin: 2em 0;
  padding: 1em 2em;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.back-button:hover {
  background-color: #0056b3;
}

.footer {
  text-align: center;
  padding: 1em;
  background-color: #f0f0f0;
  color: #666;
  font-size: 0.85em;
}
</style>
